/******************** 变量 ********************/
$popover-max-width: 4.88rem;
$popover-distance: 0.08rem;
$popover-arrow-width: 0.08rem;
$popover-arrow-distance: 0.16rem;

$popover-text-color-dark: #e6e6e6;
$popover-bg-color-dark: #1f2129;
$popover-box-shadow-dark: 0 0.02rem 0.08rem 0 rgba(#000000, 0.5);
$popover-close-color-dark: #808080;

$popover-text-color-light: #1a1a1a;
$popover-bg-color-light: #ffffff;
$popover-box-shadow-light: 0 0.02rem 0.08rem 0 rgba(#1a1a1a, 0.15);
$popover-close-color-light: #4d4d4d;
$popover-close-color-hover-light: #2673e5;
$popover-close-color-active-light: #1359bf;

/******************** mixin ********************/

/******************** 组件 ********************/
lv-popover {
  display: inline-block;
  color: $text-color;
  font-size: $font-size-base;
  font-family: $font-family;
  line-height: $line-height-base;
}

.lv-popover-z-index .cdk-overlay-pane {
  max-height: max-content;
}

.lv-popover {
  .lv-popover-container {
    position: relative;
    width: max-content;
  }

  .lv-popover-inner {
    box-sizing: border-box;
    padding: $padding-md;
    text-align: left;
    text-decoration: none;
    word-wrap: break-word;
    word-break: break-word;
    border-radius: $border-radius-lg;
    
    .lv-popover-header {
      font-weight: $font-weight-bold;
      font-size: $font-size-base;
    }

    .lv-popover-close {
      position: absolute;
      top: 0.16rem;
      right: 0.16rem;
      display: block;
      width: $icon-size-base;
      height: $icon-size-base;
      cursor: pointer;
    }

    .lv-has-closable {
      .lv-popover-header {
        width: calc(100% - 0.24rem);
      }
    }

    .lv-has-closable-distance {
      margin-top: $margin-md;
    }
  }

  &.lv-popover-theme-dark {
    .lv-popover-inner {
      color: $popover-text-color-dark;
      background-color: $popover-bg-color-dark;
      box-shadow: $popover-box-shadow-dark;

      .lv-popover-close {
        color: $popover-close-color-dark;
      }
    }
  }

  &.lv-popover-theme-light {
    .lv-popover-inner {
      color: $popover-text-color-light;
      background-color: $popover-bg-color-light;
      box-shadow: $popover-box-shadow-light;

      .lv-popover-close {
        color: $popover-close-color-light;

        &:hover {
          color: $popover-close-color-hover-light;
        }

        &:active,
        &:focus {
          color: $popover-close-color-active-light;
        }
      }
    }
  }
}

.lv-popover-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

// 提示框位置
.lv-popover {
  &-position-top,
  &-position-topLeft,
  &-position-topRight {
    .lv-popover-container {
      margin-bottom: $margin-xs;
    }
  }

  &-position-right,
  &-position-rightTop,
  &-position-rightBottom {
    .lv-popover-container {
      margin-left: $margin-xs;
    }
  }

  &-position-bottom,
  &-position-bottomLeft,
  &-position-bottomRight {
    .lv-popover-container {
      margin-top: $margin-xs;
    }
  }

  &-position-left,
  &-position-leftTop,
  &-position-leftBottom {
    .lv-popover-container {
      margin-right: $margin-xs;
    }
  }
}

.lv-popover-show-arrow {
  &.lv-popover {
    &-position-top,
    &-position-topLeft,
    &-position-topRight {
      .lv-popover-container {
        padding-bottom: $popover-distance;

        .lv-popover-inner {
          box-shadow: 0 0.02rem 0.16rem $shadow-color;
        }
      }
    }

    &-position-right,
    &-position-rightTop,
    &-position-rightBottom {
      .lv-popover-container {
        padding-left: $popover-distance;

        .lv-popover-inner {
          box-shadow: -0.02rem 0 0.16rem $shadow-color;
        }
      }
    }

    &-position-bottom,
    &-position-bottomLeft,
    &-position-bottomRight {
      .lv-popover-container {
        padding-top: $popover-distance;

        .lv-popover-inner {
          box-shadow: 0 -0.02rem 0.16rem $shadow-color;
        }
      }
    }

    &-position-left,
    &-position-leftTop,
    &-position-leftBottom {
      .lv-popover-container {
        padding-right: $popover-distance;

        .lv-popover-inner {
          box-shadow: 0.02rem 0 0.16rem $shadow-color;
        }
      }
    }
  }
}

// 小三角位置
.lv-popover {
  // 上方
  &-position-top &-arrow,
  &-position-topCenter &-arrow,
  &-position-topLeft &-arrow,
  &-position-topRight &-arrow {
    bottom: 0;
    border-width: $popover-arrow-width $popover-arrow-width 0;
  }

  &-position-top.lv-popover-theme-light &-arrow,
  &-position-topCenter.lv-popover-theme-light &-arrow,
  &-position-topLeft.lv-popover-theme-light &-arrow,
  &-position-topRight.lv-popover-theme-light &-arrow {
    border-top-color: $popover-bg-color-light;
  }

  &-position-top.lv-popover-theme-dark &-arrow,
  &-position-topCenter.lv-popover-theme-dark &-arrow,
  &-position-topLeft.lv-popover-theme-dark &-arrow,
  &-position-topRight.lv-popover-theme-dark &-arrow {
    border-top-color: $popover-bg-color-dark;
  }

  &-position-top &-arrow,
  &-position-topCenter &-arrow {
    left: 50%;
    margin-left: -$popover-arrow-width;
  }

  &-position-topLeft &-arrow {
    left: $popover-arrow-distance;
  }

  &-position-topRight &-arrow {
    right: $popover-arrow-distance;
  }

  // 右方
  &-position-right &-arrow,
  &-position-rightCenter &-arrow,
  &-position-rightTop &-arrow,
  &-position-rightBottom &-arrow {
    left: 0;
    border-width: $popover-arrow-width $popover-arrow-width $popover-arrow-width 0;
  }

  &-position-right.lv-popover-theme-light &-arrow,
  &-position-rightCenter.lv-popover-theme-light &-arrow,
  &-position-rightTop.lv-popover-theme-light &-arrow,
  &-position-rightBottom.lv-popover-theme-light &-arrow {
    border-right-color: $popover-bg-color-light;
  }

  &-position-right.lv-popover-theme-dark &-arrow,
  &-position-rightCenter.lv-popover-theme-dark &-arrow,
  &-position-rightTop.lv-popover-theme-dark &-arrow,
  &-position-rightBottom.lv-popover-theme-dark &-arrow {
    border-right-color: $popover-bg-color-dark;
  }

  &-position-right &-arrow,
  &-position-rightCenter &-arrow {
    top: 50%;
    margin-top: -$popover-arrow-width;
  }

  &-position-rightTop &-arrow {
    top: $popover-arrow-distance;
  }

  &-position-rightBottom &-arrow {
    bottom: $popover-arrow-distance;
  }

  // 下方
  &-position-bottom &-arrow,
  &-position-bottomCenter &-arrow,
  &-position-bottomLeft &-arrow,
  &-position-bottomRight &-arrow {
    top: 0;
    border-width: 0 $popover-arrow-width $popover-arrow-width;
  }

  &-position-bottom.lv-popover-theme-light &-arrow,
  &-position-bottomCenter.lv-popover-theme-light &-arrow,
  &-position-bottomLeft.lv-popover-theme-light &-arrow,
  &-position-bottomRight.lv-popover-theme-light &-arrow {
    border-bottom-color: $popover-bg-color-light;
  }

  &-position-bottom.lv-popover-theme-dark &-arrow,
  &-position-bottomCenter.lv-popover-theme-dark &-arrow,
  &-position-bottomLeft.lv-popover-theme-dark &-arrow,
  &-position-bottomRight.lv-popover-theme-dark &-arrow {
    border-bottom-color: $popover-bg-color-dark;
  }

  &-position-bottom &-arrow,
  &-position-bottomCenter &-arrow {
    left: 50%;
    margin-left: -$popover-arrow-width;
  }

  &-position-bottomLeft &-arrow {
    left: $popover-arrow-distance;
  }

  &-position-bottomRight &-arrow {
    right: $popover-arrow-distance;
  }

  // 左方
  &-position-left &-arrow,
  &-position-leftCenter &-arrow,
  &-position-leftTop &-arrow,
  &-position-leftBottom &-arrow {
    right: 0;
    border-width: $popover-arrow-width 0 $popover-arrow-width $popover-arrow-width;
  }

  &-position-left.lv-popover-theme-light &-arrow,
  &-position-leftCenter.lv-popover-theme-light &-arrow,
  &-position-leftTop.lv-popover-theme-light &-arrow,
  &-position-leftBottom.lv-popover-theme-light &-arrow {
    border-left-color: $popover-bg-color-light;
  }

  &-position-left.lv-popover-theme-dark &-arrow,
  &-position-leftCenter.lv-popover-theme-dark &-arrow,
  &-position-leftTop.lv-popover-theme-dark &-arrow,
  &-position-leftBottom.lv-popover-theme-dark &-arrow {
    border-left-color: $popover-bg-color-dark;
  }

  &-position-left &-arrow,
  &-position-leftCenter &-arrow {
    top: 50%;
    margin-top: -$popover-arrow-width;
  }

  &-position-leftTop &-arrow {
    top: $popover-arrow-distance;
  }

  &-position-leftBottom &-arrow {
    bottom: $popover-arrow-distance;
  }
}

// 最大宽度
.lv-popover-maxwidth {
  max-width: $popover-max-width;

  &.lv-popover {
    .lv-popover-container {
      width: 100%;
    }
    .lv-popover-inner {
      word-wrap: normal;
      max-height: 6.2rem;
    }
  }
}

.lv-popover-z-index {
  z-index: $zindex-popover;
}
